<template>
  <view class="box">
	  <view class="title">
		  {{ canvasBaseData[0].title }}
	  </view>
    <view class="canvas">
		<view class="liquidLevel">
			<view class="liquidLevel-name">液位</view>
			<!-- <view class="liquidLevel-value">1.2m</view> -->
			<view class="vacuumPump">
				真空泵
			</view>
			<view class="vacuumPumpImg">
				<view class="vacuumPumpImg-icon">
					<view class="circle"></view>
					<view class="rect"></view>
				</view>
				<view class="vacuumPumpImg-off">
					<img v-if="true" class="minValveOff" src="./../static/img/off.png" />
					<img v-else class="minValveOff" src="./../static/img/on.png" />
				</view>
			</view>
		</view>
		<view class="oneWaterway">
			<view class="oneWaterwayBox">
				<view class="oneWaterway-1">
					<img src="./../static/img/119.svg" />
					<view class="oneWaterway-1-minValve">
						<img class="minValveImg" src="./../static/img/110.svg" />
						<img v-if="true" class="minValveOff" src="./../static/img/off.png" />
						<img v-else class="minValveOff" src="./../static/img/on.png" />
					</view>
				</view>
				<view class="oneWaterway-3">
					<img src="./../static/img/119.svg" />
					<view class="oneWaterway-1-minValve">
						<img class="minValveImg" src="./../static/img/110.svg" />
						<img v-if="true" class="minValveOff" src="./../static/img/off.png" />
						<img v-else class="minValveOff" src="./../static/img/on.png" />
					</view>
				</view>
				<view class="oneWaterway-4">
					<img src="./../static/img/119.svg" />
					<view class="oneWaterway-1-minValve">
						<img class="minValveImg" src="./../static/img/110.svg" />
						<img v-if="true" class="minValveOff" src="./../static/img/off.png" />
						<img v-else class="minValveOff" src="./../static/img/on.png" />
					</view>
				</view>
				<view class="oneWaterway-5">
					<img src="./../static/img/119.svg" />
					<view class="oneWaterway-1-minValve">
						<img class="minValveImg" src="./../static/img/110.svg" />
						<img v-if="true" class="minValveOff" src="./../static/img/off.png" />
						<img v-else class="minValveOff" src="./../static/img/on.png" />
					</view>
				</view>
				<view class="oneWaterway-6">
					<img src="./../static/img/119.svg" />
					<view class="oneWaterway-1-minValve">
						<img class="minValveImg" src="./../static/img/110.svg" />
						<img v-if="true" class="minValveOff" src="./../static/img/off.png" />
						<img v-else class="minValveOff" src="./../static/img/on.png" />
					</view>
				</view>
				<view class="oneWaterway-2">
					<img src="./../static/img/111.svg" />
				</view>
			</view>
			
		</view>
		<view class="electric">
			<view v-if="firstItem.id" class="electric-1" @click="handleText('1')">
				<view class="electric-1-title">1#</view>
				<view class="electric-1-equipment">
					<img src="./../static/img/258.svg" />
					<img v-if="firstItem.deviceStatus == '0'" class="minValveOff" src="./../static/img/off.png" />
					<img v-else class="minValveOff" src="./../static/img/on.png" />
				</view>
			</view>
			<view v-else class="electric-1">
				<view class="electric-1-equipmentNull">
					<img src="./../static/img/119.svg" />
				</view>
			</view>
			<view v-if="secondItem.id" class="electric-2">
				<view class="electric-2-title">2#</view>
				<view class="electric-2-equipment">
					<img src="./../static/img/258.svg" />
					<img v-if="secondItem.deviceStatus == '0'" class="minValveOff" src="./../static/img/off.png" />
					<img v-else class="minValveOff" src="./../static/img/on.png" />
				</view>
			</view>
			<view v-else class="electric-2">
				<view class="electric-2-equipmentNull">
					<img src="./../static/img/119.svg" />
				</view>
			</view>
			<view v-if="thirdItem.id" class="electric-3">
				<view class="electric-3-title">3#</view>
				<view class="electric-3-equipment">
					<img src="./../static/img/258.svg" />
					<img v-if="thirdItem.deviceStatus == '0'" class="minValveOff" src="./../static/img/off.png" />
					<img v-else class="minValveOff" src="./../static/img/on.png" />
				</view>
			</view>
			<view v-else class="electric-3">
				<view class="electric-3-equipmentNull">
					<img src="./../static/img/119.svg" />
				</view>
			</view>
			<view v-if="fourthItem.id" class="electric-4">
				<view class="electric-4-title">4#</view>
				<view class="electric-4-equipment">
					<img src="./../static/img/258.svg" />
					<img v-if="fourthItem.deviceStatus == '0'" class="minValveOff" src="./../static/img/off.png" />
					<img v-else class="minValveOff" src="./../static/img/on.png" />
				</view>
			</view>
			<view v-else class="electric-4">
				<view class="electric-4-equipmentNull">
					<img src="./../static/img/119.svg" />
				</view>
			</view>
			<view v-if="fifthItem.id" class="electric-5">
				<view class="electric-5-title">5#</view>
				<view class="electric-5-equipment">
					<img src="./../static/img/258.svg" />
					<img v-if="fifthItem.deviceStatus == '0'" class="minValveOff" src="./../static/img/off.png" />
					<img v-else class="minValveOff" src="./../static/img/on.png" />
				</view>
			</view>
			<view v-else class="electric-5">
				<view class="electric-5-equipmentNull">
					<img src="./../static/img/119.svg" />
				</view>
			</view>
		</view>
		<view class="annotation">
			<view class="annotation-1">
				<view class="annotation-1-label">
					<view class="label-1" v-for="items in firstItem.iotShowDeviceVariableList" :key="items.id">
						<view class="label-1-name">{{ items.label }}</view>
						<view class="label-1-val">{{ items.variableValue }}{{ items.variableUnit }}</view>
					</view>
				</view>
				<view class="annotation-1-img">
					<img src="./../static/img/119.svg" />
					<img v-if="true" class="minValveOff" src="./../static/img/off.png" />
					<img v-else class="minValveOff" src="./../static/img/on.png" />
				</view>
			</view>
			<view class="annotation-2">
				<view v-if="secondItem.id" class="annotation-2-label">
					<view class="label-2" v-for="items in secondItem.iotShowDeviceVariableList" :key="items.id">
						<view class="label-1-name">{{ items.label }}</view>
						<view class="label-1-val">{{ items.variableValue }}{{ items.variableUnit }}</view>
					</view>
				</view>
				<view v-else style="height: 108rpx;">
					
				</view>
				<view class="annotation-2-img">
					<img src="./../static/img/119.svg" />
					<img v-if="true" class="minValveOff" src="./../static/img/off.png" />
					<img v-else class="minValveOff" src="./../static/img/on.png" />
				</view>
			</view>
			<view class="annotation-3">
				<view v-if="thirdItem.id" class="annotation-3-label">
					<view class="label-3" v-for="items in thirdItem.iotShowDeviceVariableList" :key="items.id">
						<view class="label-1-name">{{ items.label }}</view>
						<view class="label-1-val">{{ items.variableValue }}{{ items.variableUnit }}</view>
					</view>
				</view>
				<view v-else style="height: 108rpx;">
					
				</view>
				<view class="annotation-3-img">
					<img src="./../static/img/119.svg" />
					<img v-if="true" class="minValveOff" src="./../static/img/off.png" />
					<img v-else class="minValveOff" src="./../static/img/on.png" />
				</view>
			</view>
			<view class="annotation-4">
				<view v-if="fourthItem.id" class="annotation-4-label">
					<view class="label-4" v-for="items in fourthItem.iotShowDeviceVariableList" :key="items.id">
						<view class="label-1-name">{{ items.label }}</view>
						<view class="label-1-val">{{ items.variableValue }}{{ items.variableUnit }}</view>
					</view>
				</view>
				<view v-else style="height: 108rpx;">
					
				</view>
				<view class="annotation-4-img">
					<img src="./../static/img/119.svg" />
					<img v-if="true" class="minValveOff" src="./../static/img/off.png" />
					<img v-else class="minValveOff" src="./../static/img/on.png" />
				</view>
			</view>
			<view class="annotation-5">
				<view v-if="fifthItem.id" class="annotation-5-label">
					<view class="label-5" v-for="items in fifthItem.iotShowDeviceVariableList" :key="items.id">
						<view class="label-1-name">{{ items.label }}</view>
						<view class="label-1-val">{{ items.variableValue }}{{ items.variableUnit }}</view>
					</view>
				</view>
				<view v-else style="height: 108rpx;">
					
				</view>
				<view class="annotation-5-img">
					<img src="./../static/img/119.svg" />
					<img v-if="true" class="minValveOff" src="./../static/img/off.png" />
					<img v-else class="minValveOff" src="./../static/img/on.png" />
				</view>
			</view>
		</view>
		<view class="sealedTube">
			<img src="./../static/img/111.svg" />
		</view>
		<view class="config">
			<!-- <view class="config-left">
				<view class="config-left-label">自动开关</view>
				<switch checked color="#007aff" style="transform:scale(0.7)"/>
			</view>
			<view class="config-right">
				<view class="config-right-label">压力</view>
				<view class="config-right-val">0.38</view>
			</view> -->
		</view>
	</view>
  </view>
</template>

<script>
export default {
	props: {
		canvasBaseData: Array
	},
	  computed: {
	    firstItem() {
			if (this.canvasBaseData.length > 0) {
				return this.canvasBaseData[0];
			} else {
				return {}
			}
	    },
		secondItem() {
			if (this.canvasBaseData.length > 1) {
				return this.canvasBaseData[1];
			} else {
				return {}
			}
		},
		thirdItem() {
			if (this.canvasBaseData.length > 2) {
				return this.canvasBaseData[2];
			} else {
				return {}
			}
		},
		fourthItem() {
			if (this.canvasBaseData.length > 3) {
				return this.canvasBaseData[3];
			} else {
				return {}
			}
		},
		fifthItem() {
			if (this.canvasBaseData.length > 4) {
				return this.canvasBaseData[4];
			} else {
				return {}
			}
		},
	  },
  data() {
    return {
    };
  },
  methods: {
	  
	  handleText(item) {
		  if (item == '1') {
			let deviceInfoCanvas = JSON.stringify(this.canvasBaseData[0])
			 uni.setStorageSync('deviceInfoCanvas', deviceInfoCanvas);
			 let deviceInfoBool = true
			this.$tab.navigateTo(`/pages/device/index?deviceInfoBool=${deviceInfoBool}`)
		  }
	  }
  }
};
</script>

<style scoped lang="scss">
	.box{
		background-color: #ffffff;
		margin: 20rpx;
		height: calc(100vh - 80rpx);
	}
	.title{
		font-size: 30rpx;
		text-align: center;
		padding: 10rpx 0;
	}
	.canvas{
		margin-top: 20rpx;
		position: relative;
		::after{
			height: auto;
		}
		.config{
			position: absolute;
			top: 840rpx;
			left: 280rpx;
			display: flex;
			&-left{
				display: flex;
				&-label{
					background-color: purple;
					padding: 5rpx 8rpx;
					color: #ffffff;
					height: 52rpx;
				}
			}
			&-right{
				position: absolute;
				left: 280rpx;
				width: 100rpx;
				text-align: center;
				&-label{
					background-color: purple;
					padding: 5rpx 8rpx;
					color: #ffffff;
				}
				&-val{
					margin-top: 5rpx;
					border: 1px solid #777777;
					border-radius: 4rpx;
					padding: 5rpx 8rpx;
				}
			}
		}
		.sealedTube{
			position: absolute;
			top: 130rpx;
			left: 660rpx;
			img{
				width: 40rpx;
				height: 640rpx;
			}
		}
		.annotation{
			position: absolute;
			top: 10rpx;
			left: 356rpx;
			&-1{
				&-label{
					height: 108rpx;
					.label-1{
						width: 330rpx;
						display: flex;
						margin-bottom: 8rpx;
						font-size: 26rpx;
						&-name{
							background-color: purple;
							color: #ffffff;
							padding: 6rpx 12rpx;
						}
						&-val{
							background-color: #ffffff;
							color: #838282;
							border: 1px solid #838282;
							border-radius: 5rpx;
							padding: 6rpx 12rpx;
						}
					}
				}
				&-img{
					position: relative;
					top: 2px;
					left: -12rpx;
					img{
						width: 330rpx;
						height: 40rpx;
					}
					
					.minValveOff{
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						left: 160rpx;
						top: -25rpx;
						z-index: 10;
					}
				}
			}
			&-2{
				position: absolute;
				top: 150rpx;
				&-label{
					height: 108rpx;
					.label-2{
						width: 330rpx;
						display: flex;
						margin-bottom: 8rpx;
						font-size: 26rpx;
						&-name{
							background-color: purple;
							color: #ffffff;
							padding: 6rpx 12rpx;
						}
						&-val{
							background-color: #ffffff;
							color: #838282;
							border: 1px solid #838282;
							border-radius: 5rpx;
							padding: 6rpx 12rpx;
						}
					}
				}
				&-img{
					position: relative;
					top: 2px;
					left: -12rpx;
					img{
						width: 330rpx;
						height: 40rpx;
					}
					
					.minValveOff{
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						left: 160rpx;
						top: -25rpx;
						z-index: 10;
					}
				}
			}
			&-3{
				position: absolute;
				top: 300rpx;
				&-label{
					height: 108rpx;
					.label-3{
						width: 330rpx;
						display: flex;
						margin-bottom: 8rpx;
						font-size: 26rpx;
						&-name{
							background-color: purple;
							color: #ffffff;
							padding: 6rpx 12rpx;
						}
						&-val{
							background-color: #ffffff;
							color: #838282;
							border: 1px solid #838282;
							border-radius: 5rpx;
							padding: 6rpx 12rpx;
						}
					}
				}
				&-img{
					position: relative;
					top: 2px;
					left: -12rpx;
					img{
						width: 330rpx;
						height: 40rpx;
					}
					
					.minValveOff{
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						left: 160rpx;
						top: -25rpx;
						z-index: 10;
					}
				}
			}
			&-4{
				position: absolute;
				top: 460rpx;
				&-label{
					height: 108rpx;
					.label-4{
						width: 330rpx;
						display: flex;
						margin-bottom: 8rpx;
						font-size: 26rpx;
						&-name{
							background-color: purple;
							color: #ffffff;
							padding: 6rpx 12rpx;
						}
						&-val{
							background-color: #ffffff;
							color: #838282;
							border: 1px solid #838282;
							border-radius: 5rpx;
							padding: 6rpx 12rpx;
						}
					}
				}
				&-img{
					position: relative;
					top: 2px;
					left: -12rpx;
					img{
						width: 330rpx;
						height: 40rpx;
					}
					
					.minValveOff{
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						left: 160rpx;
						top: -25rpx;
						z-index: 10;
					}
				}
			}
			&-5{
				position: absolute;
				top: 620rpx;
				&-label{
					height: 108rpx;
					.label-5{
						width: 330rpx;
						display: flex;
						margin-bottom: 8rpx;
						font-size: 26rpx;
						&-name{
							background-color: purple;
							color: #ffffff;
							padding: 6rpx 12rpx;
						}
						&-val{
							background-color: #ffffff;
							color: #838282;
							border: 1px solid #838282;
							border-radius: 5rpx;
							padding: 6rpx 12rpx;
						}
					}
				}
				&-img{
					position: relative;
					top: 2px;
					left: -12rpx;
					img{
						width: 330rpx;
						height: 40rpx;
					}
					
					.minValveOff{
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						left: 160rpx;
						top: -25rpx;
						z-index: 10;
					}
				}
			}
		}
		.electric{
			position: absolute;
			top: 20rpx;
			left: 296rpx;
			&-1,&-2,&-3,&-4,&-5{
				&-title{
					text-align: center;
					font-size: 20rpx;
					padding: 6rpx 0;
					width: 50rpx;
					background-color: #63b6ed;
					color: #ffffff;
				}
				&-equipment{
					position: absolute;
					img{
						width: 60rpx;
						height: 100rpx;
					}
					.minValveOff{
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						left: 0;
						top: 10rpx;
						z-index: 10;
					}
				}
				&-equipmentNull{
					position: absolute;
					top: 100rpx;
					img{
						width: 60rpx;
						height: 40rpx;
					}
				}
			}
			&-2{
				position: absolute;
				top: 150rpx;
			}
			&-3{
				position: absolute;
				top: 300rpx;
			}
			&-4{
				position: absolute;
				top: 460rpx;
			}
			&-5{
				position: absolute;
				top: 620rpx;
			}
		}
		.oneWaterway{
			position: absolute;
			top: 120rpx;
			left: 160rpx;
			.oneWaterwayBox{
				position: relative;
			}
			&-1,&-3,&-4,&-5,&-6{
				width: 140rpx;
				height: 40rpx;
				img{
					width: 140rpx;
					height: 40rpx;
				}
			}
			&-1{
				&-minValve{
					position: relative;
					.minValveImg{
						
						transform:rotate(90deg);
						-ms-transform:rotate(90deg); /* IE 9 */
						-webkit-transform:rotate(90deg); /* Safari and Chrome */
						position: absolute;
						left: 8rpx;
						top: 30rpx;
					}
					.minValveOff{
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						left: 64rpx;
						top: 36rpx;
						z-index: 10;
					}
				}
			}
			&-3{
				position: absolute;
				top: 150rpx;
				&-minValve{
					position: relative;
					.minValveImg{
						transform:rotate(90deg);
						-ms-transform:rotate(90deg); /* IE 9 */
						-webkit-transform:rotate(90deg); /* Safari and Chrome */
						position: absolute;
						left: 8rpx;
						top: 30rpx;
					}
					.minValveOff{
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						left: 64rpx;
						top: 36rpx;
						z-index: 10;
					}
				}
			}
			&-4{
				position: absolute;
				top: 300rpx;
				&-minValve{
					position: relative;
					.minValveImg{
						transform:rotate(90deg);
						-ms-transform:rotate(90deg); /* IE 9 */
						-webkit-transform:rotate(90deg); /* Safari and Chrome */
						position: absolute;
						left: 8rpx;
						top: 30rpx;
					}
					.minValveOff{
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						left: 64rpx;
						top: 36rpx;
						z-index: 10;
					}
				}
			}
			&-5{
				position: absolute;
				top: 460rpx;
				&-minValve{
					position: relative;
					.minValveImg{
						transform:rotate(90deg);
						-ms-transform:rotate(90deg); /* IE 9 */
						-webkit-transform:rotate(90deg); /* Safari and Chrome */
						position: absolute;
						left: 8rpx;
						top: 30rpx;
					}
					.minValveOff{
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						left: 64rpx;
						top: 36rpx;
						z-index: 10;
					}
				}
			}
			&-6{
				position: absolute;
				top: 620rpx;
				&-minValve{
					position: relative;
					.minValveImg{
						transform:rotate(90deg);
						-ms-transform:rotate(90deg); /* IE 9 */
						-webkit-transform:rotate(90deg); /* Safari and Chrome */
						position: absolute;
						left: 8rpx;
						top: 30rpx;
					}
					.minValveOff{
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						left: 64rpx;
						top: 36rpx;
						z-index: 10;
					}
				}
			}
			&-2{
				width: 40rpx;
				height: 740rpx;
				margin: -13rpx 30rpx;
				img{
					width: 40rpx;
					height: 780rpx;
					&-minValve{
						position: relative;
						.minValveImg{
							transform:rotate(90deg);
							-ms-transform:rotate(90deg); /* IE 9 */
							-webkit-transform:rotate(90deg); /* Safari and Chrome */
							position: absolute;
							left: 18rpx;
							top: 30rpx;
						}
					}
				}
			}
		}
		.liquidLevel{
			position: absolute;
			top: 100rpx;
			left: 60rpx;
			height: 740rpx;
			width: 100rpx;
			background: #0099ff;
			border:1px solid #eee;
			border-radius: 5rpx;
			&-name{
				margin: 20rpx 10rpx 10rpx;
				padding: 5rpx 0;
				background-color: purple;
				text-align: center;
				color: #ffffff;
				font-size: 20rpx;
			}
			&-value{
				margin: 20rpx 10rpx 10rpx;
				padding: 5rpx 0;
				background-color: #ffffff;
				color: #333333;
				text-align: center;
				font-size: 20rpx;
			}
			.vacuumPump{
				position: absolute;
				top: 750rpx;
				left: 0;
				width: 100rpx;
				text-align: center;
				background: #0099ff;
				color: #ffffff;
			}
			.vacuumPumpImg{
				position: absolute;
				top: 800rpx;
				left: 20rpx;
				&-icon{
					.circle{
						width: 66rpx;
						height: 66rpx;
						border-radius: 33rpx;
						background-color: #afabab;
					}
					.rect{
						position: absolute;
						top: 0;
						left: 33rpx;
						width: 100rpx;
						height: 30rpx;
						background-color: #afabab;
					}
				}
				&-off{
					.minValveOff{
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						left: 10rpx;
						top: 8rpx;
						z-index: 10;
					}
				}
			}
		}
	}
</style>